<template>
	<div class="course max480">
		<!-- <button type="primary" @click="getPdf('#pdfDom')">下载</button> -->
		<!-- <u-button type="primary" class="btn" size="small" @click="getPdf('#pdfDom')">下载证书</u-button> -->
		<div id="pdfDom" class="box box-align-center box-pack-center" ref="myRef">
			<div class="proBox left2">
				<!-- <van-image :src="info.cert.bgImgUrl" class="img" ref="heightRef" /> -->
				<img :src="info.bgImgUrl" ref="heightRef" class="img" :style="{ width: `100%` }" />
				<img
				  class="top"
				  src="https://yhykt.oss-cn-beijing.aliyuncs.com/29900C07657A4CAD828D2EF230573A4D73b23f4d1134d01016963f7efd51fb5.png?Expires=4799035370&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=M6%2FofmzPGy78UDg6dKAy%2BmETAPM%3D"
				  alt=""
				/>

				<div class="main-dom">
					<p class="tit">{{ info.name }}</p>
					<p class="con">
						<span class="con-name"></span>{{ user.name }}同学:<br />
						<span class="content">{{ info.cont }}</span><br />
						<span class="content-bottom">特发此证，以兹鼓励！</span>
					</p>
					<!-- <div class="con-unit">
						<p>{{ info.yzcont }}</p>
						<p class="time">{{ info.date }}</p>
					</div> -->

					<!-- <div class="chapter" v-show="isShow">
						<canvas id="chapterCanvas" type="webgl" style="width: 150px;height: 150px;"></canvas>
					</div> -->
					
					<div class="chapter" v-show="isShow">
					  <!-- <img
					    class="bottom"
					    src="https://yhykt.oss-cn-beijing.aliyuncs.com/C33301EF0BDA467A94DC2A9840FBF15Cstar.png?Expires=4799199470&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=H3fHuPVDcVEbaKX2VbVxBL%2BLxhQ%3D"
					    alt=""
					  /> -->
					  <!-- <canvas id="chapterCanvas" width="150" height="150"></canvas> -->
					  <img style="width:150px;height:150px;" src="https://yhykt.oss-cn-beijing.aliyuncs.com/64A52C073A9D4D71A625E3C17A1DE0344870d8e0c8dc7464d40244f6c3e702b.png?Expires=4809579503&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=FBrMjsQ9ahQ4hnuWWa46%2BoSgRV4%3D"  alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				user: uni.getStorageSync('user'),
				info: {

				},
				isShow: false,
				isCanvas: true,
				downType: true, // false为 pdf , true为图片
			}
		},
		onLoad(opt) {
			console.log(opt.id);
			this.id = opt.id;
			this.getCert();
		},
		methods: {
			getCert() {
				let opts = {
					url: '/ycert/getById',
					method: 'post'
				};
				let params = {
					id: this.id
				};
				this.$api.post(opts, params).then(res => {
					console.log(res);
					if (res.code == 0) {
						// this.preview();
						this.info = res.info;
						if (res.info.isGenerate == 1) {
							this.isShow = true
						} else {
							this.isShow = false
						}
					}

				})
			},
			preview() {
				// this.dialogVisible = true;
				this.$nextTick(() => {
					// 只绘画一次
					this.isCanvas = true
					this.getChapter()
				})

			},
			// 生成印章
			getChapter() {
				this.isCanvas = true;
				// let canvas = uni.createSelectorQuery().select('#chapterCanvas');
				
				const query = uni.createSelectorQuery();
				query.select('#chapterCanvas').fields({node:true,size:true}).exec((res)=>{
					// if (canvas != null) {
						console.log(res);
						const canvas = res[0].node;
						var context = canvas.getContext("2d");
						// context.clearRect(0, 0, 200, 200);//清除整个画布
						canvas.height = canvas.height;
						var text = this.info.orgName;
						var companyName = this.info.yzcont;
						//  context.translate(0, 0);
						// 绘制印章边框
						var width = canvas.width / 2;
						var height = canvas.height / 2;
						context.lineWidth = 3;
						context.strokeStyle = "#cf0c0c";
						context.beginPath();
						context.arc(width, height, 60, 0, Math.PI * 2); //宽、高、半径
						context.stroke();
					
						//画五角星
						create5star(context, width, height, 15, "#cf0c0c", 0);
					
						// 绘制印章名称
						context.font = "16px 宋体";
						context.textBaseline = "middle"; //设置文本的垂直对齐方式
						context.textAlign = "center"; //设置文本的水平对对齐方式
						context.lineWidth = 1;
						context.strokeStyle = "#cf0c0c";
						context.strokeText(text, width, height + 30); // 名称 xx专用章
					
						// 绘制印章单位
						context.translate(width, height); // 平移到此位置,
						context.font = "20px 宋体";
						var count = companyName.length; // 字数
						var angle = (3 * Math.PI) / (3 * (count - 1)); // 字间角度
						var chars = companyName.split("");
						var c;
						for (var i = 0; i < count; i++) {
							c = chars[i]; // 需要绘制的字符
							if (i == 0) {
								context.rotate((6 * Math.PI) / 6); // 文字起始位置
							} else {
								context.rotate(angle);
							}
					
							context.save();
							context.translate(45, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
							context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
							context.strokeText(c, 0, 0); // 此点为字的中心点
							context.restore();
						}
					
						//绘制五角星
						function create5star(context, sx, sy, radius, color, rotato) {
							context.save();
							context.fillStyle = color;
							context.translate(sx, sy); //移动坐标原点
							context.rotate(Math.PI + rotato); //旋转
							context.beginPath(); //创建路径
							var x = Math.sin(0);
							var y = Math.cos(0);
							var dig = (Math.PI / 5) * 4;
							for (var i = 0; i < 5; i++) {
								//画五角星的五条边
								var x = Math.sin(i * dig);
								var y = Math.cos(i * dig);
								context.lineTo(x * radius, y * radius);
							}
							context.closePath();
							context.stroke();
							context.fill();
							context.restore();
						}
					
					// }
					
				})
				console.log('>>>>>');
				console.log(uni.createSelectorQuery());

				// query.select('#chapterCanvas').boundingClientRect(data => {
				// 	console.log(data)
				// 	canvas = data
				// }).exec();
				// = query.select('#chapterCanvas');
				// console.log(canvas);
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	// @media screen and (max-width: 768px) {
	//   .proBox.left2 .tit {
	//     top: 130px !important;
	//   }
	//   .proBox.left2 .con {
	//     top: 160px;
	//   }
	// }
	// @media screen and (max-width: 540px) {
	//   .proBox.left2 .tit {
	//     top: 80px !important;
	//   }
	//   .proBox.left2 .con {
	//     top: 100px;
	//   }
	// }
	// @media screen and (max-width: 414px) {
	//   .proBox.left2 .tit {
	//     top: 91px !important;
	//   }
	// }
	// @media screen and (max-width: 411px) {
	//   .proBox.left2 .tit {
	//     top: 94px !important;
	//   }
	//   .proBox.left2 .con {
	//     top: 130px;
	//   }
	// }

	// @media screen and (max-width: 375px) {
	//   .proBox.left2 .con {
	//     top: 110px;
	//   }
	//   .proBox.left2 .tit {
	//     top: 65px !important;
	//     font-size: 28px;
	//   }
	// }

	// @media screen and (max-width: 320px) {
	//   .proBox.left2 .con {
	//     top: 65px;
	//     padding: 0 20px !important;
	//   }
	//   .proBox.left2 .tit {
	//     top: 65px !important;
	//     font-size: 24px;
	//   }
	// }
	.btn {
		position: absolute;
		top: 20px;
		right: 20px;
		z-index: 1000000;
	}

	.course {
		position: relative;
		box-sizing: border-box;
		height: 100%;
		background: #ffffff;
		overflow-y: auto;
	}

	//证书样式

	#pdfDom {
		/* 要想pdf周边留白，要在这里设置 */
		//   padding: 20px;
		//   width: 750px;
		position: relative;
		height: 100%;
	}

	.proBox.left2 {
		// background: url("https://yhykt.oss-cn-beijing.aliyuncs.com/A5D8925E3E6D45D294C5ED3056EE17AFsbzs.png?Expires=4781038927&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=zeLxf7D9%2BeG5tnsXLXsE9cbJ1Xo%3D")
		//   no-repeat;
		// background-size: 100%;
		width: 100%;
		position: relative;
		height: 100%;
		overflow: hidden;
	}

	.top {
		position: fixed;
		width: 150px;
		height: 108px;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.main-dom {
		margin-top: 110px;
		height: auto;
	}

	// .proBox.left2 .tit {
	//   // top: 56px;
	// }

	.tit {
		color: #9f643a;
		font-size: 32px;
		font-weight: 700;
		position: relative;
		// top: 60px;
		//   left: 8px;
		letter-spacing: 5px;
		font-family: STHeiti;
		margin: 20px 0;
		text-align: center;
	}

	.proid {
		text-align: right;
		margin: 0;
		font-weight: 500;
		/* margin-right: 5px; */
	}

	.proBox.left2 .con {
		padding: 0 40px 0 30px;
	}

	.con {
		position: relative;
		top: 0px;
		left: 8px;
		padding: 0 80px;
		font-size: 15px;
		font-weight: 700;
		text-align: left;
		margin: 10px 0;
		line-height: 32px;
		text-indent: 2em;
		color: #9f643a;
	}

	.con-name {
		font-family: 华文行楷, STXingkai;
		border-bottom: 2px solid #9f643a;
	}

	.content {
		padding-left: 50px;
	}

	.content-bottom {
		display: block;
		margin-top: 20px;
		width: 100%;
		text-align: right;
	}

	.con-unit {
		font-size: 16px;
		position: absolute;
		right: 45px;
		bottom: 77px;
		text-align: center;
		color: #9f643a;
	}

	.con-unit p {
		margin: 5px 0;
	}

	.con-footer {
		font-size: 18px;
		font-weight: 700;
		position: absolute;
		bottom: 30px;
		left: 0;
		right: 0;
		text-align: center;
	}

	.chapter {
		border-radius: 50%;
		position: absolute;
		bottom: 60px;
		right: 30px;
	}

	.bottom {
		border-radius: 50%;
		position: absolute;
		bottom: 60px;
		right: 30px;
	}

	.img {
		position: fixed;
		width: 100%;
		height: 100%;
		// z-index: -1;
		max-width: 480px;
	}

	.qcode {
		position: absolute;
		bottom: 60px;
		left: 18px;
		transform: translate(50%, 0);

		.tips {
			font-size: 13px;
			color: rgb(179, 179, 179);
		}
	}
</style>
